<template>
  <el-dialog
    :title="textMap[dialogStatus]"
    :visible.sync="dialogVisible"
    width="600px">
    <el-form ref="dataForm" label-width="120px" :rules="rules" :model="dataForm">
      <el-form-item label="所属码头" prop="portId" v-if="$store.getters.isAdmin && dialogStatus !== 'update'">
        <port-tree-select :handle-selected="handleSelected"></port-tree-select>
      </el-form-item>
      <el-form-item label="科室" prop="depart">
        <el-input type="text" style="width:200px;" v-model="dataForm.depart"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input type="text" style="width:200px;" v-model="dataForm.name"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="tel">
        <el-input type="text" style="width:200px;" v-model="dataForm.tel"></el-input>
      </el-form-item>
      <el-form-item label="值班日" prop="dutyDay">
        <div>
          <el-checkbox-group v-model="dataForm.dutyDay">
            <div>
              <el-checkbox border label="1">周一</el-checkbox>
              <el-checkbox border label="2">周二</el-checkbox>
              <el-checkbox border label="3">周三</el-checkbox>
              <el-checkbox border label="4">周四</el-checkbox>
            </div>
            <div>
              <el-checkbox border label="5">周五</el-checkbox>
              <el-checkbox border label="6">周六</el-checkbox>
              <el-checkbox border label="7">周日</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </el-form-item>
      <el-form-item label="接收短信类型" prop="dutyType">
        <div>
          <el-checkbox-group v-model="dataForm.dutyType">
            <div>
              <el-checkbox border label="1">异常集装箱号 </el-checkbox>
              <el-checkbox border label="2">重复在港集装箱</el-checkbox>
              <el-checkbox border label="3">重出重进集装箱</el-checkbox>
            </div>
            <div>
              <el-checkbox border label="4">异常途中监管集装箱</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button v-if="this.dialogStatus === 'create'" type="primary" @click="submit">确 定</el-button>
      <el-button v-if="this.dialogStatus === 'update'" type="primary" @click="save"> 保存</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import { covertArrParams } from '@/utils/tools'
  import PortTreeSelect from '@/components/PortTreeSelect'
  import { addEmp, updateEmp } from '@/api/warningSettings'
  export default {
    name: 'dutyDialog',
    components: {PortTreeSelect},
    props: {
      callBack: {
        type: Function
      }
    },
    data(){
      return {
        dialogVisible: false,
        dialogStatus: 'create',
        textMap: {
          update: '修改值班人员',
          create: '新建值班人员'
        },
        dataForm: {
          portId: null,
          depart: null,
          name: null,
          dutyType: [],
          dutyDay: [],
          tel: null,
          remark: null
        },
        rules: {
          portId: {required: true, message: '请选择码头'},
          depart: {required: true, message: '请输入科室'},
          name: {required: true, message: '请输入姓名'},
          tel: [
            {required: true, message: '请输入手机'},
            {
              validator: (rule, value, callback) => {
                const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
                if (reg.test(value)) {
                  callback()
                } else {
                  callback(new Error('手机号不正确!'))
                }
              }, trigger: 'blur'
            }
          ],
          dutyDay: {required: true, message: '请选择值班日'},
          dutyType: {required: true, message: '请选择接收短信类型'},
        }
      }
    },
    methods: {
      handleCreate() {
        this.dialogStatus = 'create'
        this.dialogVisible = true
      },
      handleEdit(obj){
        this.dialogStatus = 'update'
        this.dialogVisible = true
        this.dataForm = {
          id: obj.id,
          portId: obj.portId,
          depart: obj.depart,
          name: obj.name,
          dutyType: obj.dutyType.split(','),
          dutyDay: obj.dutyDay.split(','),
          tel: obj.tel
        }
      },
      handleSelected(node){
        this.dataForm.portId = node.id
        this.$refs['dataForm'].validateField('portId')
      },
      submit(){
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            const params = covertArrParams(this.dataForm, ['dutyType', 'dutyDay'])
            addEmp(params).then(res => {
              this.callBack(res)
              this.dialogVisible = false
            })
          }
        })
      },
      save(){
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            const params = covertArrParams(this.dataForm, ['dutyType', 'dutyDay'])
            updateEmp(params).then(res => {
              this.callBack(res)
              this.callBack(res)
              this.dialogVisible = false
            })
          }
        })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped="scope">
  .el-form-item__error {
    line-heiglt: 14px !important;
  }
</style>
